<template>
  <ul class="files">
    <li v-for="f in urls" :key="f.url">
      <span>{{ f.name }}</span>
      <span class="option-icon" @click="downAccessory(f)">
        <i class="el-icon-download" />
      </span>
    </li>
  </ul>
</template>
<script>
import { downloadFile } from '@/api/common'
export default {
  name: 'PrototypeRoomFile',
  props: {
    files: {
      type: String,
      default: ''
    }
  },
  computed: {
    urls() {
      if (!this.files) {
        return []
      }
      return this.files.split(',').map(e => {
        const name = e.split('/').pop()
        const _name = name.split('~')
        return {
          url: e,
          name: _name.length > 1 ? _name[1] : name
        }
      })
    }
  },
  methods: {
    downAccessory(file) {
      downloadFile(file.url).then(res => {
        const t = URL.createObjectURL(res)
        const a = document.createElement('a')
        a.href = t
        a.download = file.name
        a.click()
        setTimeout(() => {
          URL.revokeObjectURL(t)
        }, 30 * 1000)
      })
      // const a = document.createElement('a')
      // a.target = '_blank'
      // a.href = file.url
      // a.download = file.name
      // a.click()
    }
  }
}
</script>
<style lang="scss" scoped>
.files{
  margin: 0;
  padding: 0;
  &>li{
    line-height: 20px;
    span{
      padding-right: 10px;
    }
    .option-icon{
      font-size: 14px;
      cursor: pointer;
    }
  }
}
</style>
